<template>
  <div class="option-operate-wrap">
    <el-button
      icon="ele-Plus"
      link
      type="primary"
      @click="addDefaultOption()"
    >
      {{ $t("formgen.option.addOption") }}
    </el-button>
    <el-button
      v-if="['CHECKBOX', 'RADIO'].indexOf(item.typeId) > -1"
      icon="ele-CirclePlus"
      link
      type="primary"
      @click="addInputOption()"
    >
      {{ $t("formgen.option.addOther") }}
    </el-button>
    <el-button
      icon="ele-DocumentCopy"
      link
      type="primary"
      @click="openBatchEditDialogHandle"
    >
      {{ $t("formgen.option.batchAdd") }}
    </el-button>
    <el-dialog
      :title="$t('formgen.option.batchAdd')"
      v-model="dialogVisible"
      width="50%"
    >
      <div class="desc-text">{{ $t("formgen.option.lineByOption") }}</div>
      <el-input
        v-model="batchItemValue"
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 5000 }"
        :validate-event="false"
        :placeholder="$t('formgen.option.batchDesc')"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">{{ $t("formI18n.all.cancel") }}</el-button>
          <el-button
            type="primary"
            @click="batchEditSelectItems"
          >
            {{ $t("formI18n.all.confirm") }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { useFormOptionEdit } from "../hooks/useFormOptionEdit";
import { ref } from "vue";

const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const batchItemValue = ref("");
const dialogVisible = ref(false);
const { addDefaultOption, addInputOption } = useFormOptionEdit(props);

const openBatchEditDialogHandle = () => {
  dialogVisible.value = true;
};

const batchEditSelectItems = () => {
  const arrStrs = batchItemValue.value;
  const arr = arrStrs.split("\n");
  if (arr.length > 1) {
    for (let index = 0; index < arr.length; index++) {
      const element = arr[index];
      if (element) {
        addDefaultOption(element);
      }
    }
  }
  dialogVisible.value = false;
};
</script>
<style scoped lang="scss">
.option-operate-wrap {
  margin-top: 20px;
  padding-left: 20px;
}

:deep(.el-textarea__inner:hover) {
  box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset !important;
}
</style>
